<template>
  <div>
    <!--form表单-->
    <el-form size="small" ref="formData" :model="formData" label-width="150px">
      <!--客服设置-->
      <div class="common-form">客服设置</div>
      <el-form-item label="QQ" :rules="[{required: true,message: '请输入QQ'}]">
        <el-input type="number" v-model="formData.qq" placeholder="请输入QQ" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="微信号" :rules="[{required: true,message: '请输入微信号'}]">
        <el-input v-model="formData.wechat" placeholder="请输入微信号" class="max-w460"></el-input>
      </el-form-item>
      <el-form-item label="公众号二维码" :rules="[{required: true,message: '请输入上传公众号二维码'}]">
        <el-button @click="chooseImg">选择图片</el-button>
        <img class="mt10" v-img-url="formData.mp_image" width="200">
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="primary" @click="onSubmit" :disabled="loading">提交</el-button>
      </div>
    </el-form>

    <!--上传图片-->
    <Upload v-if="isupload" :isupload="isupload" :config="{ total: 3 }" @returnImgs="returnImgsFunc"></Upload>
  </div>
</template>

<script>

  import SettingApi from '@/api/setting.js';
  import Upload from '@/components/file/Upload.vue';
  export default{
    components:{
      Upload
    },
    data(){
      return {
        /*是否正在加载*/
        loading:true,
        /*表单数据对象*/
        formData:{
          qq:'',
          wechat:'',
          mp_image:''
        },
        /*是否打开图片选择*/
        isupload:false
      }
    },
    created() {
      this.getParams();
    },
    methods:{

      /*获取配置数据*/
      getParams() {
        let self = this;
        SettingApi.getMpService({}, true).then(res => {
            if (res.code == 1) {
              self.formData=res.data;
              self.loading=false;
            } else {
              console.log();
            }
          })
          .catch(error => {

          });
      },

      /*提交*/
      onSubmit() {
        let self = this;
        let params = this.formData;
        self.$refs.formData.validate((valid) => {
          if (valid) {
            self.loading = true;
            SettingApi.setMpService(params, true)
              .then(data => {
                self.loading = false;
                ElMessage ({
                  message: '恭喜你， 客服设置成功',
                  type: 'success'
                });
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });

      },

      /*选择图片*/
      chooseImg(){
        this.isupload=true;
      },

      /*关闭选择图片*/
      returnImgsFunc(e){
        this.isupload=false;
        this.formData.mp_image=e[0].filePath;
      }

    }
  }
</script>

<style>
</style>
